<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="renderer" content="webkit">
        <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
        <title>{$eyou.field.seo_title}</title>
        <meta name="description" content="{$eyou.field.seo_description}" />
        <meta name="keywords" content="{$eyou.field.seo_keywords}" />
        <link href="{eyou:global name='web_cmspath' /}/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        {eyou:static file="skin/js/jquery-3.7.0.min.js"/}
        {eyou:static file="skin/css/style.css"/}
        {eyou:static file="skin/css/eyou.css"/}
        {eyou:static file="skin/css/item.css"/}
        {eyou:static file="skin/css/pro.css"/}
        {eyou:static file="skin/css/product_comment.css"/}
        {eyou:static file="skin/css/swiper.css"/}
    </head>
    <body>
        {eyou:include file="header.htm" /}
        <div class="ey_list ey_inside">
            <div class="width">
                <div class="web_main">
                    <div class="picfl">
                        <div class="medium-product-image">
                            {notempty name='$eyou.field.video_paths'}
                            <a id="zoomVideo" class="clearfix" rel="gallery">
                                <video id="product-video" controls autoplay muted preload="none"><source src="{$eyou.field.video_paths}" type="video/mp4"></video>
                            </a>
                            <a style="display: none;" id="zoom" class="clearfix" rel="gallery"> <img class="img-responsive center-block"> </a>
                            {else/}
                            {eyou:volist name="$eyou.field.image_list" limit='0,1'}
                            <a id="zoom" class="clearfix" href="{$field.image_url}" rel="gallery"> <img class="img-responsive center-block" src="{$field.image_url}"> </a> 
                            {/eyou:volist}
                            {/notempty}
                        </div>
                        <div id="thumbnails" class="thumbnails">
                            <div id="thumbnailSwiper" class="thumbnail-swiper swiper-container">
                                <ul class="swiper-wrapper">
                                    {notempty name='$eyou.field.video_paths'}
                                    <li class="swiper-slide goodsVideo">
                                        <a href="javascript:void(0);" class="zoomThumbActive">
                                            <img class="img-responsive center-block" src="{$eyou.field.litpic}">
                                        </a> 
                                    </li>
                                    {/notempty}
                                    {eyou:volist name="$eyou.field.image_list"}
                                    <li class="swiper-slide goodsImage">
                                        <a  href="javascript:void(0);" rel="{gallery: 'gallery', smallimage: '{$field.image_url}', largeimage: '{$field.image_url}'}">
                                            <img class="img-responsive center-block" src="{$field.image_url}">
                                        </a> 
                                    </li>
                                    {/eyou:volist}
                                </ul>
                            </div>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                    </div>

                    <div class="confr-box">
                        <div class="confr-con">
                            <div class="confr">
                                <h1>{$eyou.field.title}</h1>
                                {eyou:notempty name='$eyou.field.subtitle' /}<div class="words">{$eyou.field.subtitle}</div>{/eyou:notempty}
                                <div class="blank-small"></div>
                                {eyou:sppurchase id='field' currentstyle='selected'}
                                <div id="" class="seckill-base">
                                    <span class="pull-left">限时秒杀</span>
                                    <div id="countdown" class="countdown">
                                        <i class="iconfont icon-time"></i>
                                        距离结束: 
                                        <span>9555天 15:22:38</span>
                                    </div>
                                </div>
                                
                                <div class="selected-list">
                                    <div class="ey-price-x">
                                        <span class="name-p">秒杀价</span><span class="price-p"><em>￥</em>{$field.users_price}</span>
                                    </div>
                                    <div class="ey-price-x">
                                        <span class="name-p">销售价</span><span class="crossed-price-p"><em>￥</em>{$field.users_price}</span>
                                    </div>
                                </div>
                                <ul class="webspec">
                                    {eyou:volist name="$field.ReturnData" id='field2'}
                                    <li>
                                        <div class="spec-name"><em>{$field2.spec_name}</em><u>：</u></div>
                                        <dl>
                                            {eyou:volist name="$field2.spec_value" id='field3'}
                                            <dt {$field3.SpecData} class="{notempty name='$field3.spec_image'}sku_pic{eyou:else /}sku-text{/notempty}{$field3.SpecClass}">  {notempty name="$field3.spec_image"}<img src="{$field3.spec_image}">{/notempty} <span>{$field3.spec_value}</span></dt>
                                            {/eyou:volist}
                                        </dl>
                                    </li>
                                    {/eyou:volist}
                                </ul>
                                
                                <ul class="action su-box">
                                    <li>
                                        <div class="su-box-name"><em>数量</em><u>：</u></div>
                                        <div>
                                            <div class="amount_wrap amount_right">
                                                <span class="amount_min" {$field.ReduceQuantity}> <i class="ey-tb-jian"></i></span>
                                                <input type="text" class="inputnumber inputnumber-text" {$field.UpdateQuantity}>
                                                <span class="amount_max" {$field.IncreaseQuantity}><i class="ey-tb-jia"></i></span>
                                            </div>
                                        </div>
                                    </li>
                                    <u class="su" style="display: none;">库存：{$field.stock_count}</u> 
                                    <u class="su goumai"  {eq name="$field.stock_count_val" value="0"} style="display: none;" {/eq}>有货(限购1件)</u>
                                </ul>

                                <ul class="action">
                                    <li>
                                        <button class="btn jinzhi" href="javascript:void(0);" disabled {gt name="$field.stock_count_val" value="0"} style="display: none;" {/gt}>库存不足</button>
                                        <button class="btn goumai" href="javascript:void(0);" {$field.BuyNow} {eq name="$field.stock_count_val" value="0"} style="display: none;" {/eq}>立即购买</button>
                                        <button class="btn jiaru" href="javascript:void(0);" {$field.ShopAddCart} {eq name="$field.stock_count_val" value="0"} style="display: none;" {/eq}>加入购物车</button>
                                        <div class="shouchang"> 
                                            {eyou:collect id="collect" cancel="no" collect="ok" class='on'}
                                            <a {$collect.onclick} title="收藏" class="eyou_like"><span class='ey-tb-xx'></span>收藏</a>
                                            {$collect.hidden}
                                            {/eyou:collect}
                                        </div>
                                    </li>
                                </ul>
                                {$field.hidden}
                                {/eyou:sppurchase}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="com_reveal_footer">
                    <div class="youside">
                        <div class="select">
                            <div class="eyou_tab_switch">
                                <div class="eyou_switch_box">
                                    <ul class="eyou_switch">
                                        <li data-target="content-box" class="active"><a href="javascript:void(0);">图文详情</a></li>
                                        <li data-target="newattr-box" class=""><a href="javascript:void(0);">参数信息</a></li>
                                        <li data-target="evalute-box" class=""><a href="javascript:void(0);">用户评价</a></li>
                                    </ul>
                                    <div class="qrcode_switch">
                                        <div class="qrcode_switch_dropdown">
                                            <a href="javascript:;"><i class="ey-tb-font ey-tb-scan"></i>手机购买</a>
                                            <div class="qrcode">
                                                <img class="img-responsive center-block" src="{$eyou.field.goodsQrCode}" alt="微信公众号">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="eyou_matter">
                                <div class="eyou-contain active">
                                    <div class="eyou-contain-box" id="content-box">
                                        <div class="h2-name">图文详情</div><p>{$eyou.field.content_ey_m}</p>
                                    </div>
                                    <div class="eyou-contain-box" id="newattr-box">
                                        <div class="h2-name">参数信息</div>
                                        <div class="newattr-info">
                                            <div class="newattr-info-tab">
                                                {eyou:attribute type='newattr' attrid='$eyou.field.attrlist_id'}
                                                <div class="newattr-info-item">
                                                    <div class="newattr-info-item-title">{$attr.name}</div>
                                                    <div class="newattr-info-item-content">{$attr.value}</div>
                                                </div> 
                                                {/eyou:attribute}
                                            </div>
                                        </div>
                                        <div class="blank-big"></div>
                                    </div>
                                    <div class="eyou-contain-box" id="evalute-box">
                                        <div class="h2-name">用户评价</div>
                                        {eyou:comment aid='$eyou.field.aid' id='c_field'}
                                        <div class="evalute" {$c_field.CommentID}></div>
                                        {$c_field.hidden}
                                        {/eyou:comment}
                                    </div>
                                </div>
                            </div>
                            <div id="tingzhi"></div>
                            <div class="recommend-side">
                                <div class="boxs">
                                  <div class="h2-name">推荐商品</div>
                                  <div class="likepro">
                                    {eyou:arclist row='10' titlelen='30' id="field"}
                                        <a class="pro-card" href="{$field.arcurl}" title="{$field.title}">
                                            <div class="card-pic"><img src="{$field.litpic}" alt="{$field.title}"></div>
                                            <div class="card-wrapper">
                                                <h2 class="card-title">{$field.title}</h2>
                                                <div class="card-price">
                                                    <span class="symbol">￥</span>
                                                    <span class="price">{$field.users_price}</span>
                                                    <span class="sales">{$field.sales_num}人购买</span>
                                                </div>
                                            </div>
                                        </a>
                                    {/eyou:arclist}    
                                  </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="blank-middle"></div>
        </div>
        
        {eyou:include file="footer.htm" /}
        {eyou:static file="skin/js/product.js"/}
        {eyou:static file="skin/js/swiper.js"/}
        {eyou:static file="skin/js/jquery.migrate.js"/}
        {eyou:static file="skin/js/jquery.jqzoom.js"/}
        {eyou:static file="skin/js/lodash.js"/}
        <script>
            $().ready(function() {
                var $zoom = $("#zoom");
                var $thumbnailProductImageItem = $("#thumbnails .thumbnail-swiper .swiper-slide a");
                // 商品图片放大镜
                $zoom.jqzoom({
                    zoomWidth: 428,
                    zoomHeight: 428,
                    title: false,
                    preloadText: null,
                    preloadImages: false
                });
                // 商品缩略图轮播
                new Swiper('#thumbnailSwiper', {
                    slidesPerView: 5,
                    navigation: {
                        nextEl: ".swiper-button-next",
                        prevEl: ".swiper-button-prev"
                    }
                });
                // 商品缩略图悬停
                $thumbnailProductImageItem.hover(function() {
                    $(this).click();
                });
                // 商品轮播
                new Swiper("#productSwiper", {
                    slidesPerView: 2,
                    direction: "vertical",
                    navigation: {
                        nextEl: ".swiper-button-next.product",
                        prevEl: ".swiper-button-prev.product"
                    }
                });
            });
        </script>
    </body>
</html>